/* pages/doctor/patientDetail/patientDetail.scss */
.patient-detail-container {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 加载状态 */
.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 20rpx;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f0f0f0;
  border-top: 4rpx solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
  color: #666;
}

/* 患者内容 */
.patient-content {
  padding: 20rpx;
}

/* 患者头部 */
.patient-header {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.patient-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.patient-info {
  flex: 1;
}

.patient-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.patient-details {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 4rpx;
}

.patient-status {
  font-size: 22rpx;
  color: #999;
}

.patient-actions {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  border: none;
}

.call-btn {
  background: #52c41a;
  color: white;
}

.chat-btn {
  background: #1890ff;
  color: white;
}

/* 标签页导航 */
.tab-nav {
  display: flex;
  background: white;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.tab-item {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  font-size: 26rpx;
  color: #666;
  background: white;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: #1890ff;
  color: white;
}

/* 标签页内容 */
.tab-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 概览区域 */
.overview-section {
  background: white;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

/* 健康概览 */
.health-overview {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
}

.overview-item:last-child {
  border-bottom: none;
}

.overview-label {
  font-size: 26rpx;
  color: #666;
}

.overview-value {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
}

.overview-value.good {
  color: #52c41a;
}

/* 指标网格 */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.metric-card {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  text-align: center;
}

.metric-label {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}

.metric-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #1890ff;
  display: block;
  margin-bottom: 4rpx;
}

.metric-unit {
  font-size: 20rpx;
  color: #999;
}

/* 最近饮食 */
.recent-diet {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.diet-day {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 16rpx;
}

.diet-date {
  font-size: 24rpx;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.diet-calories {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-bottom: 12rpx;
}

.diet-meals {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.meal-item {
  display: flex;
  align-items: center;
  padding: 8rpx 0;
}

.meal-type {
  font-size: 22rpx;
  color: #1890ff;
  width: 80rpx;
}

.meal-time {
  font-size: 22rpx;
  color: #999;
  width: 100rpx;
  margin-right: 16rpx;
}

.meal-foods {
  font-size: 22rpx;
  color: #333;
  flex: 1;
}

/* 快速操作 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12rpx;
}

.quick-btn {
  padding: 16rpx;
  background: #f0f0f0;
  color: #666;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
}

/* 健康档案 */
.health-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.health-card {
  background: white;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

/* BMI详情 */
.bmi-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bmi-value {
  font-size: 48rpx;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 8rpx;
}

.bmi-status {
  font-size: 24rpx;
  color: #52c41a;
  margin-bottom: 20rpx;
}

.bmi-chart {
  width: 100%;
}

.bmi-bar {
  height: 8rpx;
  background: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.bmi-fill {
  height: 100%;
  background: #1890ff;
  transition: width 0.3s ease;
}

.bmi-labels {
  display: flex;
  justify-content: space-between;
  font-size: 20rpx;
  color: #999;
}

/* 血压详情 */
.pressure-detail {
  display: flex;
  gap: 24rpx;
}

.pressure-item {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.pressure-label {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}

.pressure-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #1890ff;
}

/* 血糖详情 */
.sugar-detail {
  display: flex;
  gap: 24rpx;
}

.sugar-item {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.sugar-label {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}

.sugar-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #1890ff;
}

/* 血脂详情 */
.lipid-detail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.lipid-item {
  text-align: center;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.lipid-label {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}

.lipid-value {
  font-size: 26rpx;
  font-weight: 600;
  color: #1890ff;
}

/* 饮食记录 */
.diet-section {
  background: white;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.add-btn {
  padding: 12rpx 20rpx;
  background: #1890ff;
  color: white;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
}

/* 时间线 */
.diet-timeline {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.timeline-item {
  position: relative;
  padding-left: 40rpx;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 16rpx;
  top: 0;
  bottom: 0;
  width: 2rpx;
  background: #e8e8e8;
}

.timeline-item::after {
  content: '';
  position: absolute;
  left: 12rpx;
  top: 8rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #1890ff;
}

.timeline-date {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
}

.timeline-content {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 16rpx;
}

.day-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #e8e8e8;
}

.day-calories {
  font-size: 24rpx;
  color: #1890ff;
  font-weight: 500;
}

.day-meals {
  font-size: 22rpx;
  color: #666;
}

.meals-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.meal-card {
  background: white;
  border-radius: 6rpx;
  padding: 12rpx;
}

.meal-header {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.meal-type {
  font-size: 22rpx;
  color: #1890ff;
  width: 80rpx;
}

.meal-time {
  font-size: 22rpx;
  color: #999;
  width: 100rpx;
  margin-right: 16rpx;
}

.meal-calories {
  font-size: 22rpx;
  color: #666;
  flex: 1;
  text-align: right;
}

.meal-foods {
  font-size: 22rpx;
  color: #333;
}

.food-item {
  margin-right: 12rpx;
}

/* 咨询记录 */
.messages-section {
  background: white;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.chat-btn {
  padding: 12rpx 20rpx;
  background: #1890ff;
  color: white;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
}

.messages-timeline {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.message-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.message-time {
  font-size: 22rpx;
  color: #999;
  text-align: center;
}

.message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.message-content.doctor {
  align-items: flex-end;
}

.message-bubble {
  max-width: 80%;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  background: #f0f0f0;
}

.message-content.doctor .message-bubble {
  background: #1890ff;
}

.message-text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.4;
}

.message-content.doctor .message-text {
  color: white;
}

.message-sender {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}
